<template>
	<view class="container" :key="toGetSumKey">
		<nav-top :title="navTitle" :type="navType" />
		<nav-background :url="navBackgroundUrl" :imageHeight="navTopBackgroundImageHeight" />
		<view class="content">
			<view class="order-main">
				<view class=".after-line main-item">
					<text class="desc">就餐方式</text>
					<text class="desc-data">堂食</text>
				</view>
				<view class=".after-line main-item">
					<text class="desc">桌号</text>
					<text class="desc-data">26A</text>
				</view>
				<view class="pre-get-time main-item">
					<text class="desc">预计取餐时间</text>
					<text class="desc-data">约12:00取餐</text>
				</view>
			</view>
			<view class="order-information">
				<view class="store">
					{{ orderInformation.shopName }}
				</view>
				<view class="price-list">
					<view class="dish-list bottom-border">
						<view class="dish-item" v-for="item in orderInformation.cartItems" :key="item.productId">
							<image class="dish-image" :src="item.picture"></image>
							<view class="desc">
								<text class="dish-name">{{item.name}}</text>
								<text class="dish-count">{{item.number}}份</text>
							</view>
							<text class="dish-fee">${{item.price}}</text>
						</view>
					</view>
					<view class="pay">
						<text class="pay-desc">实付金额</text>
						<text class="pay-sum-fee">${{orderInformation.amountPrice}}</text>
					</view>

				</view>
			</view>
			<view class="order-main">
				<view class=".after-line main-item">
					<text class="desc">支付方式</text>
					<text class="desc-data">在线支付</text>
				</view>
				<view class="main-item">
					<text class="desc">备注</text>
					<text class="desc-data">加麻加辣</text>
				</view>
			</view>

			<view class="doSum">
				<view class="desc">
					<text class="discount">已优惠${{0}}</text>
					<view class="right">
						<text class="sum">合计</text>
						<text class="price">${{orderInformation.amountPrice}}</text>
					</view>
				</view>
				<view class="submit-button" @click="submitOrder">
					提交订单
				</view>
			</view>

		</view>


	</view>
</template>

<script setup>
	import Current from "@/pages/Order/Current/Current.vue"
	import navBackgroundUrl from "@/static/images/tabBar/submitBackground@2x.png"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import request from "@/Api/request.js"
	import {
		reactive,
		ref
	} from "vue";
	const navTopBackgroundImageHeight = 668
	const navTitle = "提交订单"
	const navType = "commen"
	let toGetSumKey = ref("toGetSumKey")
	let orderInformation = reactive({})
	onLoad((options) => {

		//获取当前店铺的购物车信息
		request({
			url: `/cart/${options.shop}`,
			method: "GET"
		}).then((res) => {
			for (let key in res) {
				orderInformation[key] = res[key]
			}
			console.log("orderInformatin::::", orderInformation);
			toGetSumKey += "1"
		})

		//购物车结算产生订单,发送请求
		const params = {
			address: {
				ad: "",
				gender: "",
				name: "",
				phone: 0
			},
			cart: {
				amountNumber: 0,
				amountPackagePrice: 0,
				amountPrice: 0,
				cartItems: [{
					heft: "",
					name: "",
					number: 0,
					packagePrice: 0,
					picture: "",
					price: 0,
					productI: 0
				}],
				moa: 0,
				shopId: 0,
				shopName: ""
			},
			cutleryNumber: 0,
			deliveryTime: "",
			remark: "",
			totalCost: 0
		}
		request({
			url: "/order",
			method: "POST",
			params
		})

	})

	function submitOrder() {
		uni.navigateTo({
			url: "/pages/Home/OrderSubmit/OrderSubmit"
		})
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/commen.scss";

	.order-main {
		background: #ffffff;
		border-radius: 24rpx;
		margin: 24rpx 0 16rpx;
		padding: 32rpx;
		display: flex;
		gap: 64rpx;
		flex-direction: column;

		.main-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.desc {
				@include font-base(32rpx, #333333, 600);
			}

			.desc-data {
				@include font-base(28rpx, #000000, 400);
			}


		}

		.after-line::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 2rpx;
			background: #E6E6E6;
			bottom: -31rpx;
			left: 0;
		}
	}

	.order-information {
		background: #ffffff;
		border-radius: 24rpx;

		.store {
			height: 80rpx;
			background: #FFFFFF;
			position: relative;
			display: flex;
			margin: 0 32rpx;
			border-radius: 24rpx 24rpx 0 0;
			align-items: center;
			border-bottom: 2rpx solid #E6E6E6
		}

		.price-list {
			padding: 32rpx;
			width: 100%;
			position: relative;

			.dish-list {
				width: 100%;
			}

			.dish-item {
				position: relative;
				display: flex;
				align-items: center;

				.dish-image {
					width: 72rpx;
					height: 72rpx;
				}

				.desc {
					display: flex;
					flex-direction: column;
					align-content: space-between;

					.dish-name {
						color: #333333;
						font-size: 24rpx;
						font-weight: 500;
					}

					.dish-count {
						color: #999999;
						font-size: 20rpx;
						font-weight: 400;
					}
				}

				.dish-fee {
					position: absolute;
					right: 0rpx;
					color: #333333;
					font-size: 28rpx;
					font-weight: 600;
				}
			}

			.pay {
				margin-top: 32rpx;
				display: flex;
				flex-direction: column;
				row-gap: 16rpx;

				view {
					display: flex;
					justify-content: space-between;
				}

				.desc {
					font-size: 24rpx;
					font-weight: 400;
					color: #000000;
				}

				.pay-fee,
				.discount-fee {
					color: #000000;
					font-weight: 600;
					font-size: 28rpx;
				}


				.discount-fee {
					color: #FF615C;
				}

				.pay-desc,
				.pay-sum-fee {
					color: #000000;
					font-size: 28rpx;
					font-weight: 600;
				}

			}

			.pay {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

		}

		.bottom-border {
			border-bottom: 2rpx solid #E6E6E6;
			width: 100%;
			padding-bottom: 32rpx;
		}
	}

	// .ps {
	// 	background: #FFFFFF;
	// 	border-radius: 24rpx;
	// 	margin-top: 16rpx;
	// 	.item {
	// 		display: flex;
	// 		justify-content: space-between;
	// 	}
	// }

	.doSum {
		height: 104rpx;
		width: calc(100% - 64rpx);
		display: flex;
		position: absolute;
		bottom: 68rpx;

		.desc {
			border-radius: 56rpx 0 0 56rpx;
			height: 100%;
			background: #333333;
			width: calc(100% - 104rpx);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx 0 48rpx;
			letter-spacing: .1em;

			.discount {
				@include font-base(24rpx, #FFFFFF, 400);
			}

			.sum {
				@include font-base(28rpx, #FFFFFF, 400);
			}

			.price {
				@include font-base(40rpx, #FFFFFF, 600);
			}
		}

		.submit-button {
			border-radius: 0 56rpx 56rpx 0;
			height: 100%;
			background: linear-gradient(to right, #FFD93B, #FFB42D);
			width: 208rpx;
			color: #333333;
			@include font-base(32rpx, #333333, 600);
			line-height: 104rpx;
			text-align: center;
		}
	}
</style>